<template>
    <div>
        <group>
            <x-input title="收货人" v-model="forms.real_name" type="text" name="real_name" novalidate :icon-type="iconType.real_name"
                     placeholder="收货人"></x-input>
            <x-input title="联系电话" v-model="forms.tel" name="tel" novalidate :icon-type="iconType.tel"
                     placeholder="联系电话" type="tel"
                     is-type="china-mobile"></x-input>

            <x-address title="地址"  v-model="region_code" :list="addressData" placeholder="请选择地区">
                <template slot="title" scope="props">
            <span :class="props.labelClass" :style="props.labelStyle" style="height:24px;">
              <span class="demo-icon demo-icon-big" style="font-size:20px;vertical-align:middle;"></span>
              <span style="vertical-align:middle;">选择收货地区</span>
            </span>
                </template>
            </x-address>

            <x-input title="收货详细地址" v-model="forms.address" type="text" name="name" novalidate
                     :icon-type="iconType.address"
                     placeholder="收货人"></x-input>

        </group>
        <div style="padding:15px;">
            <x-button @click.native="doPost" type="primary">注册</x-button>
        </div>
        <div v-transfer-dom>
            <actionsheet :menus="menus" v-model="showMenus" show-cancel></actionsheet>
        </div>
    </div>
</template>

<script>

    import Vue from 'vue'
    import {
        ToastPlugin,
        ChinaAddressV3Data,
        XAddress,
        Toast,
        XHeader,
        Value2nameFilter as value2name,
        Actionsheet,
        TransferDom,
        Group,
        XInput,
        ButtonTab,
        XButton
    } from 'vux'
    Vue.use(ToastPlugin)

    export default {
        directives: {
            TransferDom
        },
        components: {
            Toast,
            XHeader,
            Actionsheet,
            ButtonTab,
            XButton,
            Group,
            XInput,
            XAddress
        },
        data () {
            return {
                addressData: ChinaAddressV3Data,
                menus: {
                    menu1: 'Take Photo',
                    menu2: 'Choose from photos'
                },
                showMenus: false,
                showMore: true,
                region_code:[],
                forms: {
                    real_name: 'iceqi',
                    tel: '17600955560',
                    email: '95857548@qq.com',
                    address:'测试',
                    region:''
                },
                iconType: {
                    real_name: '',
                    mobile: '',
                    email: '',
                    password: '',
                    password_confirmation: '',
                }
            }
        },
        methods: {
            change (val) {
                console.log(val)
            },
            getName (value) {
                return value2name(value, ChinaAddressV3Data)
            },
            doPost() {
                const that = this;
                this.forms.region = this.getName(this.region_code)
                axios.post('/api/join', this.forms).then(function (res) {
                    that.$vux.toast.show({
                        text: '注册成功',
                        time: 1000,
                        type: 'success'
                    })
                    this.$router.push({path: '/home'})
                }).catch(function (error) {
                    if (error.response) {
                        for (let e_row in error.response.data) {
                            that.iconType[e_row] = 'error'
                        }
                        that.$vux.toast.show({
                            text: '注册失败,请检查',
                            time: 3000,
                            type: 'error'
                        })
                    }
                });
            },
        }

    }
</script>